<template>
  <XForm ref="form" :formData="data" :fieldList="fieldList" :options="formOption" :rules="rules"> </XForm>
</template>

<script setup>
import XForm from "@/components/XForm/index.vue"
const props = defineProps({
  country: { type: Array, default: () => [] },
  data: { type: Object, default: () => ({}) },
  isEdit: { type: Boolean, default: false },
})

const publicConfig = {
  type: "textarea",
  full: true,
  style: { width: "100%" },
  autosize: { minRows: 2, maxRows: 6 },
}

const form = ref()
const fieldList = ref([
  { type: "title", label: "备注信息" },
  { field: "buyer_remark", label: "买家留言", ...publicConfig },
  {
    field: "order_remark",
    label: "订单备注",
    ...publicConfig,
    show: ({ model }) => model.new_order_reason != 4,
  },
  { field: "shipping_remark", label: "订单发货备注", ...publicConfig },
  { field: "customer_service_remark", label: "客服备注", ...publicConfig },
  { field: "logistics_remark", label: "物流备注", ...publicConfig },
])

watch(
  () => props.isEdit,
  (val) => {
    if (!val) return
    fieldList.value = fieldList.value.map((n) => ({
      ...n,
      disabled: n.field === "buyer_remark",
    }))
  },
  { immediate: true }
)

const rules = reactive({})

const formOption = ref({ labelPosition: "top" })

defineExpose({ form })
</script>

<style lang="scss" scoped></style>
